<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import Upload from '@/components/upload/index.vue'
import { FormInstance } from '@arco-design/web-vue'
import isEmpty from 'lodash/isEmpty'
import useData from '@/views/mall/product/useData'
import useOptions from '@/hooks/useOptions'
import cloneDeep from 'lodash/cloneDeep'
const props = defineProps<{ info: Product }>()
/**表单数据 */
const formRef = ref({} as FormInstance)
const formData = reactive({
  img: '',
  categoryId: '',
  sellerGoodsCategoryId: '',
  imgList: '',
  isPush: 0,
  type: 1,
} as Product)
/**
 * 运费模版
 */
const { options: transport } = useOptions({
  dataKey: 'records',
  api: '/server-shop/sys-seller/transport/page',
})
/**平台商品分类 */
const { options: platformCategory } = useOptions({
  api: '/server-shop/sys-seller/goods/category/tree',
  fieldName: { label: 'title', value: 'id' },
})
/**商品服务 */
const { options: serviceList } = useOptions({
  api: '/server-shop/sys-seller/goods/serve/list',
})
/**商品标签 */
const { options: tagList } = useOptions({
  api: '/server-shop/sys-seller/goods/tag/list',
})
/**品牌管理 */
const { options: brandList } = useOptions({
  api: '/server-shop/sys-seller/goods/brand/list',
  query: {
    status: 1,
  },
})
const { options: sellerCategory } = useOptions({
  api: '/server-shop/sys-seller/seller/goods/category/tree',
})
watch(
  () => props.info,
  n => {
    if (!isEmpty(n)) {
      Object.assign(formData, props.info)
      try {
        formData.categoryId = props.info.categoryId && JSON.parse(props.info.categoryId as string)
        // formData.categoryId = props.info.categoryId.split(',')
        console.log('🚀 ~ formData.categoryId:', formData.categoryId)
        formData.sellerGoodsCategoryId = props.info.sellerGoodsCategoryId && JSON.parse(props.info.sellerGoodsCategoryId as string)
        formData.serveId = (props.info.serveId as string).split(',')
        /**列表返回的id是number类型 拆分后是string类型需要转换一次不然select组件识别不到 */
        formData.tagId = (props.info.tagId as string).split(',').map(item => String(item))
      } catch (error) {
        console.log(error)
      }
    }
  }
)

defineExpose({
  validate: (cb?: Function) => {
    formRef.value.validate(err => {
      console.log(formData)
      try {
        const query = cloneDeep(formData)
        if (query.categoryId.length) {
          query.categoryId = JSON.stringify(formData.categoryId)
          query.sellerGoodsCategoryId = JSON.stringify(formData.sellerGoodsCategoryId)
          if (query.serveId instanceof Array) {
            query.serveId = (formData.serveId as string[]).join(',')
          }
          if (query.tagId instanceof Array) {
            query.tagId = (formData.tagId as string[]).join(',')
          }
        }
        cb?.({ status: !err, data: query })
      } catch (error) {
        cb?.({ status: false })
        console.log(error)
      }
    })
  },
  data: formData,
})
</script>
<template>
  <div class="page" style="width: 90%; margin: auto">
    <a-form ref="formRef" :model="formData" class="form" :label-col-props="{ span: 9 }" :wrapper-col-props="{ span: 15 }">
      <div class="grid-2">
        <a-form-item field="name" label="商品名称" :rules="[{ required: true, message: '请输入商品名称' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="formData.name" placeholder="请输入商品名称" />
        </a-form-item>
        <!-- <a-form-item field="type" label="商品类型" :rules="[{ required: true, message: '请选择商品类型' }]" :validate-trigger="['change', 'blur']">
          <a-select v-model="formData.type" :options="typeOptions" placeholder="请选择商品类型" />
        </a-form-item> -->
        <!-- <a-form-item field="status" label="商品状态" :rules="[{ required: true, message: '请选择商品状态' }]" :validate-trigger="['change', 'blur']">
          <a-select v-model="formData.status" :options="statusOptions" placeholder="请选择商品状态" />
        </a-form-item> -->
        <a-form-item
          field="sort"
          label="排序值"
          :rules="[
            {
              required: true,
              message: '请输入排序值',
              type: 'number',
            },
          ]"
          :validate-trigger="['change', 'blur']"
        >
          <a-input-number :min="0" v-model="formData.sort" placeholder="请输入排序值" />
        </a-form-item>
        <a-form-item field="categoryId" label="平台商品分类" :rules="[{ required: true, message: '请选择分类' }]" :validate-trigger="['change', 'blur']">
          <a-cascader v-model="formData.categoryId" multiple allow-clear :options="platformCategory" path-mode placeholder="请选择分类" />
        </a-form-item>
        <a-form-item field="sellerGoodsCategoryId" label="商户商品分类" :rules="[{ required: true, message: '请选择分类' }]" :validate-trigger="['change', 'blur']">
          <a-cascader v-model="formData.sellerGoodsCategoryId" :options="sellerCategory" multiple allow-clear path-mode placeholder="请选择分类" :field-names="{ label: 'title', value: 'id' }" />
        </a-form-item>

        <a-form-item field="serveId" label="商品服务" :rules="[{ required: true, message: '请选择商品服务' }]" :validate-trigger="['change', 'blur']">
          <a-select v-model="formData.serveId" multiple :options="serviceList" placeholder="请选择商品服务" />
        </a-form-item>
        <a-form-item field="tagId" label="商品标签">
          <a-select v-model="formData.tagId" multiple :options="tagList" placeholder="请选择商品标签" />
        </a-form-item>
        <a-form-item field="brandId" label="商品品牌" :rules="[{ required: true, message: '请选择商品品牌' }]" :validate-trigger="['change', 'blur']">
          <a-select v-model="formData.brandId" :options="brandList" placeholder="请选择商品品牌" />
        </a-form-item>
        <a-form-item
          field="transportId"
          label="运费模板"
          :rules="[
            {
              required: true,
              message: '请选择',
            },
          ]"
          :validate-trigger="['input']"
        >
          <a-select :options="transport" :field-names="{ label: 'name', value: 'id' }" v-model="formData.transportId" placeholder="请选择" allow-search />
        </a-form-item>

        <a-form-item field="sn" label="货架号">
          <a-input v-model="formData.sn" placeholder="请输入货架号" readonly />
        </a-form-item>
        <a-form-item field="salesVolumeVirtual" label="虚拟销量">
          <a-input-number :min="0" v-model="formData.salesVolumeVirtual" placeholder="请输入虚拟销量" />
        </a-form-item>
        <!-- <a-form-item field="isPush" label="是否推荐">
          <a-radio-group type="button" v-model="formData.isPush">
            <a-radio :value="0">否</a-radio>
            <a-radio :value="1">是</a-radio>
          </a-radio-group>
        </a-form-item> -->
        <a-form-item field="img" label="商品封面" :rules="[{ required: true, message: '请上传商品封面' }]" :validate-trigger="['input']">
          <Upload v-model:value="formData.img" :list="formData.img" :limit="1" />
        </a-form-item>
        <a-form-item field="imgList" label="商品图片" :rules="[{ required: true, message: '请上传商品图片' }]" :validate-trigger="['input']">
          <Upload v-model:value="formData.imgList" :limit="10" :list="formData.imgList" />
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>
<style lang="less" scoped></style>
